<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sunshine</title>
    <link rel="icon" type="image/x-icon" href="/images/sunshine.ico">
    <link href="/node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
    <link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
    <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/node_modules/vue/dist/vue.min.js"></script>
  </head>

  <body>
    <nav
      class="navbar navbar-expand-lg navbar-light"
      style="background-color: #ffc400"
    >
      <div class="container-fluid">
        <a class="navbar-brand" href="/" title="Sunshine">
          <img src="/images/logo-sunshine-45.png" height="45" alt="Sunshine">
        </a>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link" href="/"><i class="fas fa-fw fa-home"></i> Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/pin"><i class="fas fa-fw fa-unlock"></i> PIN</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/apps"><i class="fas fa-fw fa-stream"></i> Applications</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/config"><i class="fas fa-fw fa-cog"></i> Configuration</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/password"><i class="fas fa-fw fa-user-shield"></i> Change Password</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/troubleshooting"><i class="fas fa-fw fa-info"></i> Troubleshooting</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </body>
</html>

<script>
  let el = document.querySelector("a[href='"+document.location.pathname+"']");
  if(el)el.classList.add("active")
</script>

<style>
  .nav-link.active {
    font-weight: 500;
  }
  .form-control::placeholder {
    opacity: 0.5;
  }
</style>

<!-- Discord WidgetBot Crate-->
<script src="https://cdn.jsdelivr.net/npm/@widgetbot/crate@3" async defer>
  new Crate({
    server: '804382334370578482',
    channel: '804383092822900797',
    defer: false,
  })
</script>
